<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单控件要写在表单元素中 form action 提交用户信息服务器地址 -->
    <form action="test.php" method="post">
        <!-- 明文输入框 -->
        用户名:<input type="text">
        <!-- 暗文输入框 -->
        密码:<input type="password"><br>
        <!-- br强制换行标签 -->
        性别:
        <!-- 点击文字让单选按钮或者输入框聚焦 label for属性和id一致 -->
        <label for="list">
            男:<input type="radio" checked name="gender" value="male" id="list">
        </label>
        <label>
            女:<input type="radio" name="gender" value="famale">
        </label><br>
        <!-- checked可以设置单选按钮和复选框默认选中 -->
        爱好:
        游泳:<input type="checkbox" name="hobblies" value="swimming">
        篮球:<input checked type="checkbox" name="hobblies" value="basketball">
        足球:<input type="checkbox" name="hobblies" value="football"><br>
        城市:
        <select name="city">
            <!-- 对下拉选项进行分组 -->
            <optgroup label="一线城市">
                <option value="Lanzhou">兰州</option>
                <option value="Tianshui">天水</option>
                <option value="Baiyin" selected>白银</option>
            </optgroup>
            <!-- disabled禁用 -->
            <optgroup label="二线城市"disabled>
                <option value="Beijing">北京</option>
                <option value="Shanghai">上海</option>
                <option value="Hangzhou">杭州</option>
            </optgroup>
        </select><br>
        描述:
        <textarea name="des" cals="30"  rows="10"></textarea><br>
        生日:<input type="datetime-local">
        日期:<input type="date">
        文件上传:<input type="file"><br>
        滑块:
        <input type="range" min="0" max="100" step="10">
        颜色取色器：<input type="color" >
        进度条：<progress min="0" max="100" value="70"> </progress>
        <!-- 表单提交按钮 -->
         
         <input type="submit" value="提交">
         
    </form>
</body>

</html>